<template>
  <div class="profile-page">
    <nav-bar>
      <template v-slot:default>个人信息</template>
    </nav-bar>

    <div class="profile-page-header">
      <van-image
          round
          width="100px"
          height="100px"
          :src="userState.user.avatar_url"
      />
      <div class="profile-page-info"><p><span>昵称&nbsp;&nbsp;</span>{{ userState.user.name || "_" }}</p>
        <p><span>登录名&nbsp;&nbsp;</span>{{ userState.user.email || "_" }}</p>
        <p><span>个性签名&nbsp;&nbsp;</span>{{ "_" }}</p>
      </div>
    </div>

    <van-cell-group class="profile-page-body">
      <van-cell title="我的收藏" is-link @click="router.push({path:'/collect'})"/>
      <van-cell title="我的订单" is-link @click="router.push({path:'/order'})"/>
      <van-cell title="账号管理" is-link @click="router.push({path:'/account'})"/>
      <van-cell title="地址管理" is-link @click="router.push({path:'/address'})"/>
      <van-cell title="关于我们" is-link @click="router.push({path:'/about'})"/>
    </van-cell-group>

    <div class="logout-button">
      <van-button round type="success" size="large" block @click="logoutAccount">退出账号</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {logout, getUser} from "@/network/api/modules/profile";
import {useRouter} from "vue-router";
import {showFailToast} from "vant";
import {userState} from "./state";
import {onMounted,inject} from "vue";
const store: any = inject('store')
const router = useRouter();
function logoutAccount() {
  logout().then((res) => {
    console.log(res);
    if (res && res.status === 204) {
      showFailToast("退出登录成功");
      window.localStorage.setItem("token", "");
      store.commit("setIsLogin", false);
      setTimeout(() => {
        router.push({
          path: "/login"
        });
      }, 500);
    }
  });
}

onMounted(() => {
  getUser().then((res) => {
    userState.user = res;
  });
});
</script>

<style lang="scss" scoped>
.profile-page {
  margin-top: 48px;
  margin-bottom: 60px;
  background-color: #fcfcfc;

  .profile-page-header {
    position: relative;
    top: 10px;
    left: 0;
    margin: 10px;
    padding: 10px;
    background-color: #42b983;
    border-radius: 10px;
    display: flex;
    align-items: center;

    .profile-page-info {
      margin: 0 0 0 20px;
      font-size: 20px;
      text-align: left;

      p {
        margin: 10px 0;
      }
    }
  }

  .profile-page-body {
    text-align: left;
    margin: 60px 10px 40px;
  }

  .logout-button {
    margin: 0 20px;
  }
}
</style>